<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div.felt {
	background-color: #6633FF;
	width: 100px;
	height: 100px;
}

div.brik {
	background-color: #FF3030;
	width: 100px;
	height: 100px;
}

div.masterbrik {
	background-color: #00FF00;
	width: 100px;
	height: 100px;
}

#d1{
	position: absolute;
	left: 0px;
	top: 0px;
	border:2px solid;
	-moz-user-select: none;
}

#d2{
	position: absolute;
	left: 100px;
	top: 0px;
	border:2px solid;
	-moz-user-select: none;
}

#d3 {
	position: absolute;
	left: 200px;
	top: 0px;
	border:2px solid;
	-moz-user-select: none;
}

#d4 {
	position: absolute;
	left: 300px;
	top: 0px;
	border:2px solid;
	-moz-user-select: none;
}

#d5 {
	position: absolute;
	left: 0px;
	top: 100px;
	border:2px solid;
	-moz-user-select: none;
}

#d6 {
	position: absolute;
	left: 100px;
	top: 100px;
	border:2px solid;
	-moz-user-select: none;
}

#d7 {
	position: absolute;
	left: 200px;
	top: 100px;
	border:2px solid;
	-moz-user-select: none;
}

#d8 {
	position: absolute;
	left: 300px;
	top: 100px;
	border:2px solid;
	-moz-user-select: none;
}

#d9 {
	position: absolute;
	left: 0px;
	top: 200px;
	border:2px solid;
	-moz-user-select: none;
}

#d10 {
	position: absolute;
	left: 100px;
	top: 200px;
	border:2px solid;
	-moz-user-select: none;
}

#d11 {
	position: absolute;
	left: 200px;
	top: 200px;
	border:2px solid;
	-moz-user-select: none;
}

#d12 {
	position: absolute;
	left: 300px;
	top: 200px;
	border:2px solid;
	-moz-user-select: none;
}

#d13 {
	position: absolute;
	left: 0px;
	top: 300px;
	border:2px solid;
	-moz-user-select: none;
}

#d14 {
	position: absolute;
	left: 100px;
	top: 300px;
	border:2px solid;
	-moz-user-select: none;
}

#d15 {
	position: absolute;
	left: 200px;
	top: 300px;
	border:2px solid;
	-moz-user-select: none;
}

#d16 {
	position: absolute;
	left: 300px;
	top: 300px;
	border:2px solid;
	-moz-user-select: none;
}

#d17 {
	position: absolute;
	left: 0px;
	top: 400px;
	border:2px solid;
	-moz-user-select: none;
}

#d18 {
	position: absolute;
	left: 100px;
	top: 400px;
	border:2px solid;
	-moz-user-select: none;
}

#d19 {
	position: absolute;
	left: 200px;
	top: 400px;
	border:2px solid;
	-moz-user-select: none;
}

#d20 {
	position: absolute;
	left: 300px;
	top: 400px;
	border:2px solid;
	-moz-user-select: none;
}
#input1 {
	position: absolute;
	left: 10px;
	top: 510px;
}

</style>
<script type="text/javascript" src="jquery-1.9.1.min.js">
	
</script>
</head>
<body>
	<div id="d1" class="felt" draggable="true"></div>
	<div id="d2" class="felt" draggable="true"></div>
	<div id="d3" class="felt" draggable="true"></div>
	<div id="d4" class="felt" draggable="true"></div>
	<div id="d5" class="felt" draggable="true"></div>
	<div id="d6" class="felt" draggable="true"></div>
	<div id="d7" class="felt" draggable="true"></div>
	<div id="d8" class="felt" draggable="true"></div>
	<div id="d9" class="felt" draggable="true"></div>
	<div id="d10" class="felt" draggable="true"></div>
	<div id="d11" class="felt" draggable="true"></div>
	<div id="d12" class="felt" draggable="true"></div>
	<div id="d13" class="felt" draggable="true"></div>
	<div id="d14" class="felt" draggable="true"></div>
	<div id="d15" class="felt" draggable="true"></div>
	<div id="d16" class="felt" draggable="true"></div>
	<div id="d17" class="felt" draggable="true"></div>
	<div id="d18" class="felt" draggable="true"></div>
	<div id="d19" class="felt" draggable="true"></div>
	<div id="d20" class="felt" draggable="true"></div>

	<script>
		
		/** The game model */
		
		function Brik(l, m) { 
			this.location = l;	
			this.master = m;
		} 
		
		function generateBoard(brikker) {

			board = new Array();
			for (var i = 0; i < 5; i++) {
			    board[i] = new Array();
			}
			
			var num = parseInt(brikker);
			if(num > 18) {
				num = 18;
			}
			
			var master = new Brik(2,true);		
			board[0][1] = master;
	
			/** Populate the board starting from last index*/
			var stop = 20-num;
			var i = 20;
			while(i > stop){
				var brik = board[getRow(i)][getColumn(i)];
				if(typeof(brik) == "undefined") {
					board[getRow(i)][getColumn(i)] = new Brik(i, false);
					i--;
				}	
			}
		}
		
		function getRow(id) {
			switch(id) {
			case 1:
			case 2:
			case 3: 
			case 4:
				return 0;
			case 5:
			case 6:
			case 7: 
			case 8:
				return 1;
			case 9:
			case 10:
			case 11: 
			case 12:
				return 2;
			case 13:
			case 14:
			case 15: 
			case 16:
				return 3;
			case 17:
			case 18:
			case 19: 
			case 20:
				return 4;
			}
		}
		
		function getColumn(id){ 
			switch(id) {
			case 1:
			case 5:
			case 9: 
			case 13:
			case 17:	
				return 0;
			case 2:
			case 6:
			case 10: 
			case 14:
			case 18:
				return 1;
			case 3:
			case 7:
			case 11: 
			case 15:
			case 19:
				return 2;
			case 4:
			case 8:
			case 12: 
			case 16:
			case 20:
				return 3;
			}
		}

		function updateBoard() {
			for(var i = 0; i < 5; i++) {
				for(var j = 0; j < 4; j++) {
					var temp_brik = board[i][j];
					if (typeof(temp_brik) != "undefined") {
						if(temp_brik.master) {
							document.getElementById("d"+temp_brik.location).className = "masterbrik";
						}
						else {
							document.getElementById("d"+temp_brik.location).className = "brik";
						}
					}
					else {
						//(x*4+y)+1 udregner id fra array index.
						document.getElementById("d"+((i*4+j)+1)).className = "felt";
					}
				}
			}
		}
	
	/** Drag'n drop handling*/
		function canMove(fromId, toId) {
			var from = parseInt(fromId.substring(1));
			var to = parseInt(toId.substring(1));
			var column_from = getColumn(from);
			var row_from = getRow(from);
			var column_to = getColumn(to);
			var row_to = getRow(to);


			var brik_from = board[row_from][column_from];
			var brik_to = board[row_to][column_to];
			if (typeof (brik_from) == "undefined") {
				return false;
			}
			if (typeof (brik_to) != "undefined") {
				return false;
			}

			var rowDiff = row_to - row_from;
			var columnDiff = column_from - column_to;


			//Cannot move birectional
			if ((rowDiff != 0) && (columnDiff != 0)) {
				return false;
			}
			if (rowDiff > 1 || rowDiff < -1) {
				//Try to move more than one row
				return false
			}
			if (columnDiff > 1 || columnDiff < -1) {
				//Try to move more than one column
				return false
			}
			return true;
		}

		function doMove(fromId, toId) {
			var from = parseInt(fromId.substring(1));
			var to = parseInt(toId.substring(1));
			var brik_from = board[getRow(from)][getColumn(from)];
			board[getRow(to)][getColumn(to)] = new Brik(to, brik_from.master);
			board[getRow(from)][getColumn(from)] = undefined;
			return true;

		}

		function dragStart(ev) {
			
			var id = parseInt(this.id.substring(1));
			var brik = board[getRow(id)][getColumn(id)];
			if(typeof (brik) == "undefined")  {
				return false;
			}
			ev.dataTransfer.setData("Number", this.id);
			return true;
		}

		function dragEnter(ev) {
			return true;
		}

		function dragOver(ev) {
			var id = parseInt(this.id.substring(1));
			var brik = board[getRow(id)][getColumn(id)];
			if(typeof (brik) != "undefined")  {
				return false;
			}
			ev.preventDefault();
			ev.dataTransfer.dropEffect = 'move'; 
			return true;
		}
		
		function hasWon() {
			var brik = board[4][1];
			if(typeof(brik) != "undefined") {
				return brik.master;
			}
		}

		function dragDrop(ev) {
			var src = ev.dataTransfer.getData("Number");
			if (canMove(src, this.id)) {
				doMove(src, this.id);
				updateBoard();
				if(hasWon()) {
					alert("You are the winner!!");
				}
			}

		}
		
		function reconfigure(){ 
			var input = document.getElementById("input");
			var number = parseInt(input.value);
			if(number > 0 && number < 19){
				generateBoard(number);
				updateBoard();
			}
			else {
				alert("Please select a number from the list");
			}
			
		}

		var cols = document.getElementsByClassName("felt");
		[].forEach.call(cols, function(col) {
			col.addEventListener('dragstart', dragStart, false);
			col.addEventListener('dragenter', dragEnter, false);
			col.addEventListener('dragover', dragOver, false);
			col.addEventListener('drop', dragDrop, false);
		});
		var cols = document.getElementsByClassName("brik");
		[].forEach.call(cols, function(col) {
			col.addEventListener('dragstart', dragStart, false);
			col.addEventListener('dragenter', dragEnter, false);
			col.addEventListener('dragover', dragOver, false);
			col.addEventListener('drop', dragDrop, false);
		});

		$(function() {
			var board;

			/** Actual game init.*/
			generateBoard(12);
			updateBoard();

		});
	</script>
	<div id="input1">
		<input type="number" id=input name="quantity" min="1" max="18" value="12">
		<button type="button" onclick="reconfigure()">Reconfigure</button>
	</div>
</body>
</html>